import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import style from "./index.module.less"
import Tabbar from "./tabbar";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"
import React, { Fragment, useState, useEffect } from 'react'
import { Form, Input, Checkbox, Button, Toast } from 'antd-mobile'
import { getinfo } from "@/apis/user.js"
import messageicon from '../../static/icon-message.png'
import { message } from "antd";


const Mine = (props) => {
	const navigate = useNavigate();
	const [info, setInfo] = useState([]);
	const [infosName,setInfosName] = useState([])
	const [flag, setFlag] = useState(false);
	const { t } = useTranslation();

	useEffect(() => {
		// this.forceUpdate();
		// console.log('111111');
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
				// alert(9)
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		},10)
		
		if(!localStorage.getItem('login') || localStorage.getItem('login') == null || localStorage.getItem('login') == undefined || localStorage.getItem('login') == ''){
			navigate('/login')
			message.error(t('login.title52'))
			// Toast.show({
			// 	content:t('login.title52'),
			//   })
			return
		}
		if(localStorage.getItem('name')){
			setInfosName(localStorage.getItem('name'))
			setInfo(JSON.parse(localStorage.getItem('info')))
		}
		getinfo().then(res => {
			if (res.status.errorCode == 0) {
				setInfo(res.data.member)
			}
		})

		// setFlag(true);
		return ()=>{console.log('初始化----个人中心')}
	}, [window.location.href]);
	
	return (
		<React.Fragment>
			<div className={style['minecon']} id='cv'>
			<div className={style['mineheader']}>
				<div style={{ width: '20px' }}></div>
				<div className={style['mhtitle']}>{t('mine.title1')}</div>
				<img className={style['mhimg']} src={messageicon} alt="" onClick={() => navigate('/dongtai')} />
			</div>
				<div className={style['mcheader']}>
					<img className={style['avatar']} src="https://img.ecartelera.com/noticias/60900/60941-m.jpg?v=2.0" alt="" />
					<div className={style['account-info']}>
						<div className={style['nick-name']}>{infosName}</div>
						<div className={style['info-item']}>
							<div className={style['label']}>{t('mine.title2')}</div>
							<div className={style['value']}>{info && info.money}</div>
						</div>
						<div className={style['info-item']}>
							<div className={style['label']}>{t('mine.title3')}</div>
							<div className={style['value']}>0.00</div>
						</div>
					</div>
					<div className={style['setting']} onClick={() => navigate('/modify_password')}></div>
				</div>
				
				<div className={style['promote']} onClick={() => navigate('/discount_application')}>
					<div className={style['promoteicon']}></div>
					<div className={style['label']}>
						{t('mine.title21')}
						<p>TASK CENTER</p>
					</div>
				</div>
				
				<div className={style['functional-buttons']}>
					<div className={style['buttons']} onClick={() => navigate('/money_bao')}>
						<div className={style['icon-transfer']}></div>
						<div className={style['label']}>{t('mine.title4')}</div>
					</div>
					<div className={style['buttons']} onClick={() => navigate('/rechargeorder')}>
						<div className={style['icon-deposit']}></div>
						<div className={style['label']}>{t('mine.title5')}</div>
					</div>
					<div className={style['buttons']} onClick={() => navigate('/withdraw')}>
						<div className={style['icon-withdraw']}></div>
						<div className={style['label']}>{t('mine.title6')}</div>
					</div>
					{/* <div className={style['buttons']} onClick={() => navigate('/turntable')}>
						<div className={style['icon-withdraw']}></div>
						<div className={style['label']}>{t('mine.title60')}</div>
					</div> */}
				</div>
				
				<div className={style['list']}>
					<div className={style['menu-block']}>
						<div className={style['menu-item']} onClick={() => navigate('/invite')}>
							<div className={style['history']}></div>
							<div className={style['text']}>{t('invite.title3')}</div>
						</div>
						{/*<div className={style['menu-item']} onClick={() => navigate('/agent')}>
							<div className={style['rebate']}></div>
							<div className={style['text']}>{t('mine.title7')}</div>
						</div>*/}
						<div className={style['menu-item']} onClick={() => navigate('/profitloss')}>
							<div className={style['profit']}></div>
							<div className={style['text']}>{t('mine.title8')}</div>
						</div>
						<div className={style['menu-item']} onClick={() => navigate('/rechargerecord')}>
							<div className={style['history']}></div>
							<div className={style['text']}>{t('mine.title9')}</div>
						</div>
						<div className={style['menu-item']} onClick={() => navigate('/account')}>
							<div className={style['statement']}></div>
							<div className={style['text']}>{t('mine.title10')}</div>
						</div>
						<div className={style['menu-item']} onClick={() => navigate('/cardmanage')}>
							<div className={style['bankcard']}></div>
							<div className={style['text']}>{t('mine.title11')}</div>
						</div>
					</div>
					<div className={style['menu-block']}>
						<div className={style['menu-item']} onClick={() => navigate('/myinfo')}>
							<div className={style['history']}></div>
							<div className={style['text']}>{t('mine.title12')}</div>
						</div>
						<div className={style['menu-item']} onClick={() => navigate('/rakeback_get')}>
							<div className={style['rebate']}></div>
							<div className={style['text']}>{t('mine.title13')}</div>
						</div>
					</div>
				
				</div>
				<div style={{height:'100px'}}></div>
			</div>
			<Tabbar select="1"/>
		</React.Fragment>
	)
}


export default Mine
